<template>
  <div class="top-wrap">
    <div class="float-left-wrap">
      <i class="iconfont icon-arrow-left-bold"></i>
    </div>
    <div class="chat-name">{{name}}</div>
    <div class="float-right-wrap">
      <i class="iconfont icon-shenglve"></i>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{

    }
  },
  computed:{
    name(){
      if(this.$store.state.dialogueType=="single"){
        if(this.$store.state.userList[1]&&this.$store.state.userList[1].name){
          return this.$store.state.userList[1].name
        }
        else return "请点击“添加用户”"
      }
      else{
        return `${this.$store.state.groupName}(${this.$store.state.groupSize})`
      }
    }
  }
}
</script>
<style scoped>
.top-wrap {
  position: relative;
  width: 100%;
  height: 3.8%;
  /* font-size: 5rem; */
  background-color: rgb(237, 237, 237);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
i,
.chat-name {
  display: inline-block;
  font-size: 16px;
  margin-left: 8px;
}
.float-right-wrap i {
  margin-right: 16px;
}
</style>